<template>
	<view class="flex-col page">
		<view class="flex-col group_4">
			<!-- <view style="width: 100%;height: 120rpx;margin-top: 20rpx;">
				<view style="width: 70%;height: 120rpx;float: left;">
					<view style="width: 50%;height: 100rpx;float: left;">
						<view
							style="width: 80%;height: 80rpx;border: 2rpx #7ac756 solid;margin-left: 10rpx;background-color: #eef8e8;">
							<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
								{{courtPro.court_name}}
							</view>
							<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
								{{courtPro.field}}
							</view>
						</view>
					</view>
					<view style="width: 50%;height: 100rpx;float: right;">
						<view style="width: 70%;height: 80rpx;border: 2rpx #7ac756 solid;background-color: #eef8e8;">
							<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
								{{courtPro.time}}
							</view>
							<view style="color: #7ac756;text-align: center;font-size: 26rpx;">
							</view>
						</view>
					</view>
				</view>
				<view style="width: 30%;height: 120rpx;float: right;">

				</view>
			</view> -->
			<view class="" v-if="shareRecords_s != ''" style="margin-left: 20rpx;">
				我的分享记录<text style="color: #2f75fa;"> X{{shareRecords_s}}</text>
			</view>
			<view class="model_scrollx flex_row">
				<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
					<view class="scrollx_items tg_zdtg" v-for="(item,indexx) in shareRecords" :key="indexx">
						<view class="" style="float: left;">
							<image
								style="width: 80rpx;height: 80rpx;margin-top: 22rpx;margin-left: 20rpx;border-radius: 5rpx;"
								:src="item.avatar" mode="" v-if="item.avatar">
							</image>
							<u-avatar :src="avatarDemo" size="80rpx" v-else></u-avatar>
						</view>
						<view class="" style="float: right;margin-right: 20rpx;">
							<view class="tgyx_title">{{item.friend_name}}</view>
							<view class="tgyx_desc">X{{item.nums + 1}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="flex-col items-start section_1">
			<view class="group_5">
				<text class="text_2">我的剩余可分享</text>
				<text class="text_3">{{num}}名额</text>
			</view>
			<view @click="addlist" style="width: 170rpx; height: 60rpx;position: absolute; top: 22rpx; right: 30rpx;color: #2f75fa;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;border-radius: 75rpx 75rpx ;text-align: center;line-height:60rpx;border: 1rpx #2f75fa solid;">
				添加球友

			</view>

		</view>
		<view class="flex-col group_6">
			<view class="flex-col">
				<view class="member-info">
					<view class="list">
						<view v-for="(item, index) in list" :key="index" class="item flex-align" @click="checkboxed(item,index)">
							<view style="margin: 0 23rpx;">
								<u-avatar :src="item.avatar" size="100rpx" v-if="item.avatar != ''"></u-avatar>
								<u-avatar :src="avatarDemo" size="100rpx" v-else></u-avatar>
							</view>
							<view>
								<view class="flex-align">
									<view>{{ item.friend_name }}</view>
								</view>
								<view class="phone">
									{{ item.friend_phone }}
								</view>
							</view>

							<view class="detail-right">
								<text class="subtract" @click="reduce(item)">-</text>
								<text class="num">{{item.nums}}</text>
								<text @click="add_list(item)" class="add">+</text>
							</view>
						</view>
					</view>
					<view class="" style="width: 100%; height: 100rpx;">
					</view>
					<view class="bottom-add-btn" v-if="num>0">
						<u-button text="确定" shape="circle" @click="shareFriend"
							color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
					</view>
					<view class="bottom-add-btn" v-if="num <=0">
						<u-button text="确定" shape="circle"
							color="linear-gradient(0deg, rgb(138, 138, 138) 0%, rgb(138, 138, 138) 100%)">
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				avatarDemo: this.$https.assetsPath + '98211cea862fd8ddd0c3a8ad53dee51d0fb225bc.png',
				emptyImg: 'https://file.genepre.com/wechat/nomsg7.png',
				emptyText: '暂无搜索结果',
				keyword: '',
				actionStyle: {
					color: '#333',
					fontSize: '32rpx'
				},
				imgStyle: {
					width: '254rpx',
					height: '230rpx'
				},
				historyList: [], // 本地搜索记录
				contactsList: [], // 搜索的处理结果
				checkedArr: [], //复选框选中的值
				isChecked: false,
				checkboxData: [{
						value: '0',
						label: '选项一',
						avatar: '',
						name: 'A蒋宗延xxx',
						phone: '15849214234',
					},
					{
						value: '1',
						label: '选项二',
						avatar: '',
						name: 'A蒋宗延',
						phone: '15849214234',
					}
				],
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				list: [],
				id: '',
				num: 0,
				selectLength: 0,
				court_no: '',
				amountValue: 0,
				amount: '',
				nums: 0,
				beShare: "",
				total_num: "",
				shareRecords: "",
				courtPro: {},
				shareRecords_s: '',
				applicantlist: [],
			}
		},
		computed: {
			checked: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		onLoad(options) {
			const applicantlist = JSON.parse(decodeURIComponent(options.applicantlist));
			this.applicantlist = applicantlist
			this.id = options.id
			this.court_no = options.court_no
			this.beShare = options.beShare
			// this.getMemberList()
			this.getFriendsNew()
		},
		onShow() {
			this.getFriendsNew()
		},
		methods: {
			reduce(item) {
				let nums = item.nums
				if (nums > 1) {
					nums -= 1
				} else if (nums === 1) {
					nums = 0 // 设置为0，因为最少为0
				} else {
					// uni.showToast({
					//     title: "该数量不能减少了哟~"
					// })
				}

				item.nums = nums
			},
			add_list(item) {
				let nums = item.nums
				if (nums >= 0) {
					if (nums === 0) {
						nums = 1 // 设置为1，因为最多为1
					} else if (nums <= 1) {
						// 可以选择添加一个提示，因为此时 nums 小于 1 但不等于 0
					} else {
						nums = nums + 1
					}
				}
				console.log(nums, '222')
				item.nums = nums
			},
			valChange(e) {
				// console.log(e.value,'1122')
				this.amount = e.value;
			},
			addlist() {
				uni.redirectTo({
					url: '/pages_other/teammate/add/add'
				})
			},
			async getFriendsNew() {
				let params = {
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					app_id: this.$https.weixinAppId,
					id: this.applicantlist[0],
					beshared: this.beShare
				}
				let res = await venues.getFriendsNew(params)
				if (res.code == 1) {
					console.log(res.data.friends,'pp[]')
					this.list = res.data.friends
					if (res.data.shareRecords != null && res.data.shareRecords != '' && res.data.shareRecords !=
						undefined) {
						this.shareRecords = res.data.shareRecords
						this.shareRecords_s = res.data.shareRecords.length
					}
					this.courtPro = res.data.courtPro
					this.num = res.data.court.num
					this.total_num = res.data.total_num
					// console.log(this.num, '4')

					this.list.forEach((exa, idx) => {
						// console.log(exa.chosen, '222111')
						if (this.num <= 0) {
							// console.log(1212)
							exa.disabled = true

						}
						if (exa.chosen == true) {
							exa.disabled = true

						}
					})

				}
			},
		
			checkboxChange(item, index) {},
			checkboxed(item, index) {
				item.checked = !item.checked
				this.selectLength = this.list.filter(item => item.checked).length || 0
				if (this.selectLength >= this.num) {
					this.list.forEach((el, idx) => {
						if (idx == index) {
							el.disabled = false

						} else {
							if (el.checked) {

							} else {
								el.disabled = true
							}
						}
						if (el.chosen == true) {
							el.disabled = true

						}
					})
				} else {
					this.list.forEach((el, idx) => {
						el.disabled = false

						if (el.chosen == true) {
							el.disabled = true

						}
					})

				}
			},
			// 单个复选框事件
			checkboxChange(e) {
				let values = e.detail.value;

				if (values[0] == 1) {
					this.isChecked = true;
				} else {
					this.isChecked = false;
				}
			},

			// 多选复选框改变事件
			changeCheckbox(e) {
				// 处理数组的长度判断，默认需要把上一个页面是否有选好数据传递过来，
				let tempLength = e.detail.value.length
				let tempArr = e.detail.value;

				this.checkedArr = tempArr;
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.checkboxData.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},


			confirm() {
				let that = this
				app.search({}, (res) => {
					if (res.code == 0) {
						// 过滤出符合条件的值高亮
						res.data.map((item, index) => {
							if (item.name.includes(that.keyword)) {
								item.name = that.join(item.name, that.keyword)
							}
						})
						that.contactsList = res.data
					} else {
						app.showToast(res.message)
					}
				})
			},

			// 拼接
			join(str, key) {
				var reg = new RegExp(`(${key})`, 'gm')
				var replace = '<span style="color:#2851F3">$1</span>'
				return str.replace(reg, replace)
			},
			add() {
				uni.navigateTo({
					url: '/pages/personal/member-info/add/add'
				});
			},
			async shareFriend() {
				let that = this
				this.list_list = [];
				this.na_list = [];
				this.list.forEach((item) => {
					if (item.nums >= 1) {
						this.list_list.push(item.friend_phone);
						this.na_list.push(item.nums);
					}
				});
				uni.showModal({
					title: '是否确定分享！',
					// 提示文字
					content: '是否确定分享！分享后此订单不支持退单，请您知悉',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "确定",
					//删除字体的颜色 
					confirmColor: '#000000',
					//取消字体的颜色
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							// if (that.beShare == 0) {
								let params = {
									project_id: getApp().globalData.projectId,
									open_id: uni.getStorageSync("openid"),
									app_id: that.$https.weixinAppId,
									phone: that.list_list.toString(),
									share_type: 'court',
									ids: that.applicantlist,
								}
								venues.piShareFriend(params).then(res => {
									if (res.code == 1) {
										uni.navigateBack({
											delta: 1, //返回层数，2则上上页
										})
									} else {
										uni.showToast({
											title: res.info,
											duration: 2000,
											icon: 'none'
										});
									}
								})
								// let res = await venues.shareFriend(params)

							// }
							//  else if (that.beShare == 1) {
							// 	let params_s = {
							// 		project_id: getApp().globalData.projectId,
							// 		open_id: uni.getStorageSync("openid"),
							// 		app_id: that.$https.weixinAppId,
							// 		phone: that.list_list.toString(),
							// 		share_type: 'court',
							// 		code: that.court_no,
							// 		id: that.id,
							// 		share_num: that.na_list.toString(),
							// 		total_num: that.total_num,
							// 	}
							// 	// let res_s = await venues.secondShareFriend(params_s)
							// 	venues.secondShareFriend(params_s).then(res_s => {
							// 		if (res.code == 1) {
							// 			uni.navigateBack({
							// 				delta: 1, //返回层数，2则上上页
							// 			})
							// 		}
							// 	})
							// 	if (res_s.code == 1) {
							// 		uni.showModal({
							// 			title: '提示！',
							// 			content: '是否确定分享！',
							// 			showCancel: false,
							// 			success: function(res) {
							// 				if (res.confirm) {
							// 					console.log('用户点击确定');
							// 					uni.navigateBack({
							// 						delta: 1, //返回层数，2则上上页
							// 					})
							// 				} else if (res.cancel) {
							// 					console.log('用户点击取消');
							// 				}
							// 			}
							// 		});


							// 	} else {
							// 		uni.showModal({
							// 			title: '提示',
							// 			content: res_s.info,
							// 			showCancel: false,
							// 			success: function(res) {
							// 				if (res.confirm) {
							// 					console.log('用户点击确定');
							// 				} else if (res.cancel) {
							// 					console.log('用户点击取消');
							// 				}
							// 			}
							// 		});

							// 	}
							// }
						}
					}
				})
			},
			deletelist(item) {

			}

		}
	}
</script>

<style lang="scss" scoped>
	.member-info {
		padding: 0 4rpx;

		/deep/.u-index-list {
			scroll-view {
				height: calc(100vh - 220rpx - env(safe-area-inset-bottom));
				;
			}
		}

		.list {
			width: 100%;

			.item {
				padding: 20rpx 0;

				.tag {
					margin-left: 10rpx;
				}

				.phone {
					color: #BEBEBE;
					font-size: 26rpx;
					margin-top: 13rpx;
				}

				/deep/ .u-number-box {
					.u-number-box__minus,
					.u-number-box__plus,
					.u-number-box__input {
						width: 45rpx !important;
						font-size: 24rpx !important;
						height: 45rpx !important;

						text {
							font-size: 24rpx !important;
						}
					}

					.u-number-box__input {
						background-color: transparent !important;
					}
				}

				.detail-right {
					margin-left: 22%;

					text {
						width: 60rpx;
						line-height: 60rpx;
						text-align: center;
						display: inline-block;
						background-color: #F7F7F7;
						// margin-right: 10rpx;
						font-size: 28rpx;
					}

					.add {
						color: #FA4305;
						border-radius: 0 30rpx 30rpx 0;
						margin-right: 20rpx;
					}

					.subtract {
						border-radius: 30rpx 0 0 30rpx;
					}
				}
			}
		}


		.title {
			font-size: 32rpx;
			height: 100rpx;
			padding-top: 40rpx;

			&::before {
				content: '';
				display: inline-block;
				width: 6rpx;
				height: 28rpx;
				background-color: #0072ff;
				margin-top: 2rpx;
				margin-right: 22rpx;
			}
		}

		.list-cell {
			padding: 24rpx 0;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: 110rpx;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: #f2f2f2;
			}

			.right {
				margin-left: 20rpx;
			}

			.phone {
				font-size: 22rpx;
				font-weight: 400;
				margin-top: 10rpx;
				color: #BEBEBE;
			}

		}
	}

	// /deep/ checkbox .wx-checkbox-input {
	//   border-radius: 50% !important;
	//   color: #ffffff !important;
	// }

	// /deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	//   color: #fff;
	//   background: #2851F3;
	// }

	// /deep/.wx-checkbox-input.wx-checkbox-input-checked {
	//   border: none !important;
	// }
	/*checkbox 选项框大小 */

	.checkbox .wx-checkbox-input {
		border-radius: 50upx;
		/* 圆角 */
		width: 50upx;
		/* 背景的宽 */
		height: 50upx;
		/* 背景的高 */
		border: 1px solid #ccc;
		background: #eee;
	}

	/* 复选框禁用样式 */

	.checkbox .wx-checkbox-input-disabled {
		border-radius: 50upx;
		/* 圆角 */
		width: 50upx;
		/* 背景的宽 */
		height: 50upx;
		/* 背景的高 */
		background: #f3f3f3;
		border: 1px solid rgba(201, 201, 201, 1);
	}

	/* 复选框选中后样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: rgba(255, 129, 92, 1);
		border: 1px solid rgba(255, 129, 92, 1);
	}

	/*checkbox选中后图标样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	#app {
		width: 100vw;
		height: 100vh;
	}


	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.items-start {
		display: flex;
		align-items: flex-start;
	}



	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_4 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_1 {
		padding: 28rpx 0 29rpx;
		background-color: #f3f3f3;
		margin-top: 20rpx;
	}

	.group_6 {
		padding: 24rpx 30rpx 20rpx;
	}

	.group_5 {
		margin-left: 30rpx;
		line-height: 23rpx;
	}



	.text_2 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
	}

	.text_3 {
		color: #2f75fa;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22rpx;
	}

	.text_4 {
		color: #999999;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
	}

	.text_5 {
		color: #2f75fa;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22rpx;
	}

	.page-bg {
		width: 100vw;
		min-height: 100vh;
		overflow-x: hidden;
		background-size: 750rpx auto;
		background-color: #F9F9F9;
	}

	.main-container {
		width: 686rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}

	.tl-panel {
		margin-top: 40rpx;
		margin-bottom: 48rpx;
	}

	.tl-img-44 {
		width: 44rpx;
		height: 44rpx;
	}

	.tl-tag-192 {
		width: 192rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: rgba(255, 255, 255, 0.39);
		border: 2rpx solid #F5F5F5;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		border-radius: 32rpx;
		margin-right: 28rpx;
		margin-bottom: 28rpx;
	}

	.tl-section-list {
		height: 214rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
	}

	.tl-section-list:after {
		content: '';
		position: absolute;
		left: 150rpx;
		top: 214rpx;
		bottom: 0px;
		right: 32rpx;
		height: 2rpx;
		width: 538rpx;
		background-color: #D6D6D6;
	}

	.m-t-220 {
		margin-top: 220rpx;
	}

	.tl-img-120 {
		width: 120rpx;
		height: 120rpx;
	}

	.tl-w-538 {
		width: 538rpx;
		margin: 46rpx 0 48rpx 28rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.tl-footer {
		width: 750rpx;
		height: 162rpx;
		background: #FFFFFF;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0 auto;
		text-align: center;
		display: flex;
		justify-content: center;

		.tl-btn-686 {
			width: 686rpx;
			height: 84rpx;
			line-height: 84rpx;
			background: #002FA7;
			border-radius: 42rpx;
			margin-top: 24rpx;
		}
	}


	/deep/ checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #2851F3;
	}

	/deep/.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}

	/* 左右滑动 */
	.uni-swiper-tab {
		white-space: nowrap;
	}

	.model_scrollx {
		justify-content: space-between;
		// padding: 20rpx 0 30rpx 0;
	}

	.scrollx_items {
		// padding: 30rpx 20rpx;
		text-align: center;
		display: inline-block;
		width: 200rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 5px #dfdeff;
		height: 120rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.scrollx_items:last-child {
		margin-right: 30rpx;
	}

	.scrollx_items image {
		width: 70rpx;
		height: 66rpx;
	}

	.tgyx_title {
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
	}

	.tgyx_desc {
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.tg_zdtg {
		background: linear-gradient(bottom right, #d5e4fa, #dae7fb);
		// box-shadow: 0px 0px 5px #d3d3d3;
		color: #477cd3;
	}

	.tg_hot {
		background: linear-gradient(bottom right, #fffcec, #fbf6d9);
		color: #ffa800;
	}

	.tg_zshy {
		background: linear-gradient(bottom right, #fdf7fe, #f9e5fe);
		color: #c559de;
	}

	.tg_hjhy {
		background: linear-gradient(bottom right, #fff8f0, #fff0df);
		color: #f3791f;
	}
</style>